<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/myshop" style="color: #409eff;">我的账户</router-link></div>
          --><div class="hei10"></div>


                <div class="con">
                    <div class="title">账户余额</div>
                    <div class="balance">
                        <div class="kflexc" >
                          <div>当前账户余额：<span class="money" style="margin: 0 5px;">{{money}}</span>元  </div>
                          <div style="margin-left: 20px;"><el-button type="primary" round size="small" @click="logshow">充值余额</el-button> </div>
                          <div class="bblue" style="margin-left: 20px;"><router-link to="/myshop/recharge">查看充值记录></router-link></div>
                          <div class="bblue" style="margin-left: 20px;"><router-link to="/myshop/consumption">查看消费明细></router-link></div>
                        </div>
                    </div>

                    <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
                    <div class="moneysays">
                        <div class="title">收费项目列表</div>

                        <div class="bor">
                          <div class="list">
                              <div class="th">项目</div>
                              <div class="th t2">条件说明</div>
                              <div class="th">价格</div>
                          </div>
                          <div class="list">
                              <div class="td">基础订单费</div>
                              <div class="td t2">分成2个节点扣除，订单进入系统扣除0.05元，订单发货扣除0.05元</div>
                              <div class="td">0.1元/单</div>
                          </div>
                          <div class="list">
                              <div class="td">国政通查询</div>
                              <div class="td t2">自动从国政通接口核实身份证信息，按调用次数计费（可选）</div>
                              <div class="td">0.2元/次</div>
                          </div>
                          <div class="list">
                              <div class="td">智能照片审核</div>
                              <div class="td t2">自动识别身份证件照片，对照片要求不高的推荐使用（可选）</div>
                              <div class="td">0.05元/次</div>
                          </div>
                          <div class="list">
                              <div class="td">{{moban.platform_name}}商城订单费用</div>
                              <div class="td t2">用户在H5商城成功下单后扣费0.1元，后续订单进入{{moban.platform_name}}订单处理按照基础订单费计算</div>
                              <div class="td">0.1元/单</div>
                          </div>
                          <!-- <div class="list">
                              <div class="td">一证五户查询</div>
                              <div class="td t2">从联通系统查询用户是否存在一证五户的问题，按调用次数计费（可选）</div>
                              <div class="td">0.1元/次</div>
                          </div>
                          <div class="list">
                              <div class="td">外呼系统</div>
                              <div class="td t2">按订单拨打计费，发生过拨打记录即开始计费</div>
                              <div class="td">限时免费</div>
                          </div> -->
                        </div>

                    </div>
                    <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
                    <div class="moneysays">
                        <div class="title">定制开发项目缴费</div>
                        <!-- <div style="font-size: 16px; font-weight: 600;">定制开发项目缴费：</div> -->
                        <div class="bor">
                          <div class="list">
                              <div class="th">项目</div>
                              <div class="th t2">项目说明</div>
                              <div class="th">价格</div>
                              <div class="th">操作</div>
                          </div>
                          <div class="list">
                              <div class="td">自动生产对接</div>
                              <div class="td t2">对接运营商下单接口自动提交订单，或者在运营商的H5下单页面模拟人工提交订单</div>
                              <div class="td">技术评估</div>
                              <div class="td">
                                <el-button type="text" size="mini">缴费</el-button>
                              </div>
                          </div>
                        </div>
                    </div>
                    <div class="tixing">
                        <div>
                            <el-checkbox v-model="yue" text-color="#2974FF" fill="#2974FF">余额不足短信提醒</el-checkbox>
                            <el-input v-model="shoujihao" :disabled="shoujihaofix" style="width: 200px;"></el-input>
                            <el-button v-if="shoujihaofix == true" @click="shoujihaofix = false" round plain type="primary" size="medium" style="margin-left: 20px;">修改</el-button>
                            <el-button v-if="shoujihaofix == false" @click="save()" round plain type="primary" size="medium" style="margin-left: 20px;">保存</el-button>
                        </div>
                    </div>
                    <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
                    <div class="moneysays">
                      <div class="title">定制项目缴费订单</div>
                        <!-- <div style="font-size: 16px; font-weight: 600;">定制项目缴费订单：</div> -->
                        <div class="bor">
                          <div class="list">
                              <div class="th">项目名称</div>
                              <div class="th">项目类型</div>
                              <div class="th">价格</div>
                              <div class="th">时间</div>
                              <div class="th">订单状态</div>
                              <div class="th">操作</div>
                          </div>
                          <div v-for="(item,index) in jflist" :key="index" class="list">
                              <div class="td">{{item.item_name}}</div>
                              <div class="td">{{item.item_type_name}}</div>
                              <div class="td">{{item.total}}</div>
                              <div class="td">{{item.created_at}}</div>
                              <div class="td">{{item.pay_status_name}}</div>
                              <div class="td">
                                <el-button
                                v-if='item.status == -100' @click="paywindow(item.id)" type="text" size="mini">支付</el-button>
                              </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增支付二维码 -->
        <el-dialog
        title="扫码支付"
        :visible.sync="zfmshow"
        width="300px">
            <div class="t_ewmbox">
                <div>请打开微信扫码支付</div>
                <qrcode :value="qrcode" id="canvas" :options="{ size: 200 }" ></qrcode>
                <!-- <div>支付金额998</div> -->
            </div>
        </el-dialog>
        <el-dialog title="充值金额" :visible.sync="log" :close-on-click-modal="false" width="680px" @close="close">
            <div>
                <el-form ref="form" @submit.native.prevent label-width="120px">
                    <el-form-item label="充值店铺：">
                        {{shopname}}
                    </el-form-item>
                    <el-form-item label="充值金额：">
                        <div class="moneylist">
                            <div :class="salemoney == 5 ? 'red':''" @click="choose(5)">5</div>
                            <div :class="salemoney == 20 ? 'red':''" @click="choose(20)">20</div>
                            <div :class="salemoney == 50 ? 'red':''" @click="choose(50)">50</div>
                            <div :class="salemoney == 100 ? 'red':''" @click="choose(100)">100</div>
                            <div :class="salemoney == 500 ? 'red':''" @click="choose(500)">500</div>
                            <div :class="salemoney == 1000 ? 'red':''" @click="choose(1000)">1000</div>
                            <div :class="salemoney == 3000 ? 'red':''" @click="choose(3000)">3000</div>
                            <div :class="salemoney == 5000 ? 'red':''" @click="choose(5000)">5000</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="销售价格：">
                        ￥{{salemoney}}元
                    </el-form-item>
                    <el-form-item label="付款二维码：">
                        <qrcode :value="er" id="canvas" :options="{ size: 200 }" v-if="er != ''"></qrcode>
                    </el-form-item>

                    <!-- <el-form-item label="银行对公打款：">
                        <el-input v-model="all.amount" style="width: 200px;" placeholder="输入打款金额,最低100元"></el-input>
                        <el-button type="primary" plain style="margin-left: 10px; position: relative;" >
                          <chuantu ref="chuantu" @getimg="getimg" style="width: 126px; height: 40px; overflow: hidden; position: absolute; left: 0; top: 0; overflow: hidden; opacity: 0;"></chuantu>
                          上传打款截图
                        </el-button>
                        <el-button type="danger" @click="shenqing">已打款充值申请</el-button>
                    </el-form-item>

                    <el-form-item label="打款信息：">
                        <div style="padding: 20px; background: rgb(244, 244, 244); border: 1px rgb(207, 207, 207) solid; line-height: 30px;">
                          <div>山东{{moban.platform_name}}信息科技有限公司</div>
                          <div>开户行：交通银行股份有限公司烟台芝罘支行 </div>
                          <div>账号：376899991013000306128</div>
                        </div>
                    </el-form-item> -->

                </el-form>
                <!-- <div>打款流程：输入打款金额，并上传打款截图后点击：“已打款申请充值”按钮，我们将在核实到账后自动充值金额</div> -->
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="close" :loading="oking">关闭</el-button>
            </span>
        </el-dialog>
        <el-dialog  title="申请成功" center :visible.sync="chenggonglog" width="600px">
            <div style="margin: 20px 0; text-align: center;">申请打款成功，我们将在24小时内核实并充值到账，有任何问题可联系客服咨询。</div>
            <span slot="footer" class="dialog-footer xin">
                <el-button type="primary" round @click="chenggonglog = false" >确定</el-button>
            </span>
        </el-dialog>

        <el-dialog  title="申请失败" center :visible.sync="chenggonglog2" width="600px">
            <div style="margin: 20px 0; text-align: center;">请输入正确的打款金额,金额最低100元</div>
            <span slot="footer" class="dialog-footer xin">
                <el-button type="primary" round @click="chenggonglog2 = false" >确定</el-button>
            </span>
        </el-dialog>

        <el-dialog  title="申请失败" center :visible.sync="chenggonglog3" width="600px">
            <div style="margin: 20px 0; text-align: center;">请上传打款截图</div>
            <span slot="footer" class="dialog-footer xin">
                <el-button type="primary" round @click="chenggonglog3 = false" >确定</el-button>
            </span>
        </el-dialog>

        <!-- <foot></foot> -->
    </div>

</template>

<script>
    import chuantu from "../zujian/chuantu.vue";
    import axios from 'axios'
    import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
    import QRcode from '@xkeshi/vue-qrcode';
    export default {
        components: {
            "left": left,
            "top": top,
            "foot": foot,
            qrcode : QRcode,
            chuantu
        },
        name: "myshop",
        data() {
            return {
              chenggonglog3:false,
              chenggonglog2:false,
              chenggonglog:false,
              chongzhishow:false,
              all:{
                amount:"",
                payment_prove:""
              },
              yue:false,
              shoujihao:"",
              shoujihaofix:false,
                form:{},
                money:0,
                money2:0,
                log:false,
                salemoney:0,
                shopname:"",
                oking:false,
                srcurl:"./static/img/loginpic.jpg",
                er:"",
                lunxun:"",
                choosed:'',
                //支付二维码弹窗
                zfmshow:false,
                jflist:[],
                //二维码链接
                qrcode:''
            }
        },
        created() {

            var shop = JSON.parse(localStorage.getItem('SHOP'));
            this.shopname = shop.shop_name

            var that = this
            axios.get('/api/gth/shop/balance')
                .then(response => {
                    if(response.data.msg.code != 0){
                        that.$message.error(response.data.msg.info);
                    }else{
                        that.money = parseFloat(response.data.data.balance).toFixed(2)

                    }

                })

            axios.get('/api/plan-market/shop/config/info')
                .then(response => {
                    if(response.data.msg.code != 0){
                        that.$message.error(response.data.msg.info);
                    }else{

                        if(response.data.data.mobile == ''){

                        }else{
                           that.shoujihao = response.data.data.mobile
                           that.yue = true
                           that.shoujihaofix = true
                        }
                    }

                })

            // axios.get('/api/plan-market/shop/cost/sum')
            //     .then(response => {
            //         if(response.data.msg.code != 0){
            //             that.$message.error(response.data.msg.info);
            //         }else{
            //             that.money2 = response.data.data.amount
            //         }

            //     })
        },
        mounted() {
            this.choose(50)
            //缴费订单列表
            this.getjflist()

            if(this.$route.query.chongzhi){
              this.log = true
            }
        },
        beforeDestroy(){
          clearTimeout(this.lunxun)
        },
        methods: {
          logshow:function(){
            this.all = {
              amount:"",
              payment_prove:""
            }
            this.log = true
          },
          shenqing:function(){

            if(this.all.amount == '' || this.all.amount < 100){
              this.chenggonglog2 = true
              return false
            }
            if(this.all.payment_prove == ''){
              this.chenggonglog3 = true
              return false
            }

            axios.post('/api/plan-market/shop/offline/recharge',this.all)
                .then(response => {
                        if(response.data.msg.code == 0){
                            this.log = false
                            this.chenggonglog = true

                        }else{
                            this.$message.error(response.data.msg.info);
                        }
                })
          },
            getimg:function(img){
              this.all.payment_prove = img
              this.$message.success('上传成功');
            },
            save:function(){
                var that = this
                axios.post('/api/plan-market/shop/remind/config',{mobile:this.shoujihao})
                    .then(response => {
                            if(response.data.msg.code == 0){
                                that.$message({
                                    message: '保存成功！',
                                    type: 'success'
                                });
                                that.shoujihaofix = true
                            }else{
                                this.$message.error(response.data.msg.info);
                            }
                    })
            },
            close:function(){
                clearTimeout(this.lunxun)
                this.log = false
            },
            chongzhied:function(){
                var that = this
                that.ed()
                that.lunxun = setTimeout(function(){that.chongzhied()},5000)
            },
            ed:function(){
                var that = this
                axios.get('/api/plan-market/shop/recharge/result?id='+this.choosed.id)
                    .then(response => {
                            if(response.data.msg.code == 0){
                                if(response.data.data.status == 100){
                                    that.$message({
                                        message: '充值成功！',
                                        type: 'success'
                                    });
                                    clearTimeout(that.lunxun)
                                    that.log = false
                                    that.choosed = ""
                                    this.er = ''
                                }
                            }else{
                                this.$message.error(response.data.msg.info);
                            }
                    })
            },
            choose:function(num){
                if(this.lunxun != undefined){
                    clearTimeout(this.lunxun)
                }
                this.salemoney = num
                this.er = ''
                var that = this
                axios.post('/api/plan-market/shop/recharge',{product_id:num})
                    .then(response => {
                        if(response.data.msg.code != 0){
                            that.$message.error(response.data.msg.info);
                        }else{
                            that.er = response.data.data.pay_info
                            that.choosed = response.data.data
                            that.chongzhied()
                        }

                    })
            },
            //充值
            chongzhi:function(){

            },
            //缴费订单列表
            getjflist(){
                axios.get('/api/plan-market/get/shop/upstream/channel/order/list').then((response) => {
                    if(response.data.msg.code==0){
                        console.log('000')
                        console.log(response)
                        this.jflist=response.data.data
                    }else{
                        this.$message.error(response.data.msg.info);
                    }
                })
            },
            //弹出支付二维码
            paywindow(id){
                this.zfmshow=true
                axios.post('/api/plan-market/upstream/channel/order/pay',{order_id:id}).then((response) => {
                    if(response.data.msg.code==0){
                        console.log('000')
                        console.log(response)
                        this.qrcode=response.data.data.pay_info

                    }else{
                        this.$message.error(response.data.msg.info);
                    }
                })
            }
        }
    }
</script>


<style lang="scss" scoped>
    .index{
      /deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: #2974FF  !important;
            border-color: #2974FF  !important;
      }
      /deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
        color: #2974FF !important;
      }


      .bblue a{ color: #29ABE2; font-size: 14px;  margin-top: 10px;}
      .money{ font-size: 25px;}

      /deep/ .el-button--primary {
          color: #FFF;
          background-color: #2974FF;
          border-color: #2974FF;
      }

      .tixing{
        /deep/ .el-button--primary {
            color: #409eff  !important;
                background: #ecf5ff  !important;
                border-color: #b3d8ff  !important;
        }
      }


      .t_ewmbox{
          text-align: center;
      }
      .t_ewmbox img{
          width: 200px;
          margin-top: 15px;
          margin-bottom: 15px;
      }

      .tixing{ background: #FFFFFF; padding:20px;}
        .moneylist{ display: flex;}
        .erimg{ width: 200px;}
        .red{ border: 1px #FF3B3B solid !important; color: #FF3B3B !important;}
        .moneylist div{ border: 1px #AAAAAA solid; width: 85px; height: 35px; line-height: 35px; text-align: center; margin-right: 10px; cursor: pointer;}

            .title{ line-height: 50px; padding-left: 30px; font-size: 16px; background: rgb(249, 249, 249); color: rgb(51, 51, 51)}


            .con{
                .balance{ background: #FFFFFF; padding: 40px; display: flex; color: rgb(51, 51, 51); }

                .bor{ padding: 20px;}

                .list{ display: flex; line-height: 35px;
                    .th{ background: #EAEAEA; color:rgb(86, 86, 86); font-weight: bold; text-align: center; flex: 1; line-height: 38px; font-size: 14px;  }
                    .td{ background: #ffffff; color:rgb(51, 51, 51); text-align: center; border-bottom: 1px rgb(215, 215, 215) solid; flex: 1; line-height: 60px; font-size: 14px;  overflow: hidden;white-space: nowrap; text-overflow: ellipsis;}
                    .t2{ flex:4}
                }


    	}
    }
</style>
